<template>
  <view class="content pd-20 pb-40">
    <view class="list-block">
      <u-collapse :value="workInfo"  ref="workInfo">
        <u-collapse-item title="基本信息" name="workInfo" :border="true">
          <view class="item-block mb-30">
            <view class="item-label mb-20">车牌号码:</view>
            <view class="input-block pl-20 pr-20">
              <input class="input" disabled v-model="params.truckCode" placeholder="请输入..." placeholder-class="placeholder"/>
            </view>
          </view>
          <view class="item-block mb-30">
            <view class="item-label mb-20">挂车牌号:</view>
            <view class="input-block pl-20 pr-20">
              <input class="input" disabled v-model="params.trailerCode" placeholder="请输入..." placeholder-class="placeholder"/>
            </view>
          </view>
          <view class="item-block mb-30">
            <view class="item-label mb-20">货源地:</view>
            <view class="input-block pl-20 pr-20">
              <input class="input" disabled v-model="params.customerDanWeiName" placeholder="请输入..." placeholder-class="placeholder"/>
            </view>
          </view>
          <view class="item-block mb-30">
            <view class="item-label mb-20">供货公司道路运输经营许可证编号:</view>
            <view class="input-block pl-20 pr-20">
              <input class="input" disabled v-model="params.truckRoadPremitCode" placeholder="请输入..." placeholder-class="placeholder"/>
            </view>
          </view>
          <view class="item-block mb-30">
            <view class="item-label mb-20">特种设备使用登记编号:</view>
            <view class="input-block pl-20 pr-20">
              <input class="input" disabled v-model="params.spqpCtfNo" placeholder="请输入..." placeholder-class="placeholder"/>
            </view>
          </view>
          <view class="item-block mb-30">
            <view class="item-label mb-20">特种设备使用登记证有效日期:</view>
            <view class="input-block pl-20 pr-20">
              <input class="input" disabled v-model="params.spqpCtfValidDate" placeholder="请输入..." placeholder-class="placeholder"/>
            </view>
          </view>
          <view class="item-block mb-30">
            <view class="item-label mb-20">货物名称:</view>
            <view class="input-block pl-20 pr-20">
              <input class="input" disabled v-model="params.materialName" placeholder="请输入..." placeholder-class="placeholder"/>
            </view>
          </view>
          <view class="item-block mb-30">
            <view class="item-label mb-20">货物用途及流向:</view>
            <view class="input-block pl-20 pr-20">
              <input class="input" disabled v-model="params.materialUseDirection" placeholder="请输入..." placeholder-class="placeholder"/>
            </view>
          </view>
          <view class="item-block mb-30">
            <view class="item-label mb-20">货物类型:</view>
            <view class="input-block pl-20 pr-20">
              <input class="input" disabled v-model="params.materialType" placeholder="请输入..." placeholder-class="placeholder"/>
            </view>
          </view>
          <view class="item-block mb-30">
            <view class="item-label mb-20">罐箱编号:</view>
            <view class="input-block pl-20 pr-20">
              <input class="input" disabled v-model="params.truckTankCode" placeholder="请输入..." placeholder-class="placeholder"/>
            </view>
          </view>
          <view class="item-block mb-30">
            <view class="item-label mb-20">驾驶员姓名:</view>
            <view class="input-block pl-20 pr-20">
              <input class="input" disabled v-model="params.driverName" placeholder="请输入..." placeholder-class="placeholder"/>
            </view>
          </view>
          <view class="item-block mb-30">
            <view class="item-label mb-20">驾驶员危险品运输从业资格证编号:</view>
            <view class="input-block pl-20 pr-20">
              <input class="input" disabled v-model="params.driverQualificateCode" placeholder="请输入..." placeholder-class="placeholder"/>
            </view>
          </view>
          <view class="item-block mb-30">
            <view class="item-label mb-20">驾驶员危险品运输从业资格证编号有效日期:</view>
            <view class="input-block pl-20 pr-20">
              <input class="input" disabled v-model="params.driverDtctfValidDate" placeholder="请输入..." placeholder-class="placeholder"/>
            </view>
          </view>
          <view class="item-block mb-30">
            <view class="item-label mb-20">驾驶员电话:</view>
            <view class="input-block pl-20 pr-20">
              <input class="input" disabled v-model="params.driverTel" placeholder="请输入..." placeholder-class="placeholder"/>
            </view>
          </view>
          <view class="item-block mb-30">
            <view class="item-label mb-20">驾驶员身份证:</view>
            <view class="input-block pl-20 pr-20">
              <input class="input" disabled v-model="params.driverIDNumber" placeholder="请输入..." placeholder-class="placeholder"/>
            </view>
          </view>
          <view class="item-block mb-30">
            <view class="item-label mb-20">押运员姓名:</view>
            <view class="input-block pl-20 pr-20">
              <input class="input" disabled v-model="params.yayunName" placeholder="请输入..." placeholder-class="placeholder"/>
            </view>
          </view>
          <view class="item-block mb-30">
            <view class="item-label mb-20">押运员危险品运输从业资格证编号:</view>
            <view class="input-block pl-20 pr-20">
              <input class="input" disabled v-model="params.yayunQualificateCode" placeholder="请输入..." placeholder-class="placeholder"/>
            </view>
          </view>
          <view class="item-block mb-30">
            <view class="item-label mb-20">押运员危险品运输从业资格证编号有效日期:</view>
            <view class="input-block pl-20 pr-20">
              <input class="input" disabled v-model="params.scgDtctfValidDate" placeholder="请输入..." placeholder-class="placeholder"/>
            </view>
          </view>
          <view class="item-block mb-30">
            <view class="item-label mb-20">押运员电话:</view>
            <view class="input-block pl-20 pr-20">
              <input class="input" disabled v-model="params.yayunTel" placeholder="请输入..." placeholder-class="placeholder"/>
            </view>
          </view>
          <view class="item-block mb-30">
            <view class="item-label mb-20">押运员身份证:</view>
            <view class="input-block pl-20 pr-20">
              <input class="input" disabled v-model="params.yayunIDNumber" placeholder="请输入..." placeholder-class="placeholder"/>
            </view>
          </view>
          <view class="item-block mb-30">
            <view class="item-label mb-20">车头行驶证档案编号:</view>
            <view class="input-block pl-20 pr-20">
              <input class="input" disabled v-model="params.truckArchiveCode" placeholder="请输入..." placeholder-class="placeholder"/>
            </view>
          </view>
          <view class="item-block mb-30">
            <view class="item-label mb-20">挂车行驶证档案编号:</view>
            <view class="input-block pl-20 pr-20">
              <input class="input" disabled v-model="params.trailerArchiveCode" placeholder="请输入..." placeholder-class="placeholder"/>
            </view>
          </view>
          <view class="item-block mb-30">
            <view class="item-label mb-20">车头道路运输证号码:</view>
            <view class="input-block pl-20 pr-20">
              <input class="input" disabled v-model="params.truckTransportCode" placeholder="请输入..." placeholder-class="placeholder"/>
            </view>
          </view>
          <view class="item-block mb-30">
            <view class="item-label mb-20">挂车道路运输证号码:</view>
            <view class="input-block pl-20 pr-20">
              <input class="input" disabled v-model="params.trailerTransportCode" placeholder="请输入..." placeholder-class="placeholder"/>
            </view>
          </view>
          <view class="item-block mb-30">
            <view class="item-label mb-20">车头合格证编号:</view>
            <view class="input-block pl-20 pr-20">
              <input class="input" disabled v-model="params.truckQualifiedCode" placeholder="请输入..." placeholder-class="placeholder"/>
            </view>
          </view>
          <view class="item-block mb-30">
            <view class="item-label mb-20">挂车合格证编号:</view>
            <view class="input-block pl-20 pr-20">
              <input class="input" disabled v-model="params.trailerQualifiedCode" placeholder="请输入..." placeholder-class="placeholder"/>
            </view>
          </view>
          <view class="item-block mb-30">
            <view class="item-label mb-20">预计入场时间:</view>
            <view class="input-block pl-20 pr-20">
              <input class="input" disabled v-model="params.yuYueShiJian" placeholder="请输入..." placeholder-class="placeholder"/>
            </view>
          </view>
          <view class="item-block mb-30">
            <view class="item-label mb-20">填表人:</view>
            <view class="input-block pl-20 pr-20">
              <input class="input" disabled v-model="params.yongHuMing" placeholder="请输入..." placeholder-class="placeholder"/>
            </view>
          </view>
        </u-collapse-item>
      </u-collapse>
    </view>
    <view class="list-block mt-20">
      <u-collapse :value="['safeInfo']" ref="safeInfo">
        <u-collapse-item title="作业信息" name="safeInfo" :border="true">
          <view class="item-list mb-30" v-for="(item, index) in paramsSafeInfoList" :key="index">
            <view class="radio-block">
              <view class="radio-title mb-30">{{index + 1}}.{{item.content}}</view>
              <u-radio-group :disabled="disabled" placement="row" :value="item.radioStatus" @change="radioChange(item,index, $event)">
                <u-radio activeColor="#00B930" label="合格" name="合格" ></u-radio>
                <u-radio activeColor="#FE1515" label="不合格" name="不合格" ></u-radio>
              </u-radio-group>
              <view class="image-block mt-30" v-if="item.type == 1">
                <view class="image-title">拍照</view>
                <u-upload :disabled="disabled" :fileList="item.photo" :capture="['camera']" @afterRead="afterRead" @delete="deletePic" :name="JSON.stringify({paramsKey: 'paramsSafeInfoList', keyName: 'photo', index})"></u-upload>
              </view>
            </view>
          </view>
        </u-collapse-item>
      </u-collapse>
    </view>
    <view class="list-block mt-20">
      <u-collapse :value="['personInfo']" ref="personInfo">
        <u-collapse-item title="审核信息" name="personInfo" :border="true">
        
          <view class="info-block mb-30">
            <view class="item-label">检查人:</view>
            <view v-if="!disabled" class="right-block" @click="routeByUrl()">
              <text v-if="!params.checkerSignature">签章({{params.checkerName ? params.checkerName : ''}})</text>
              <image v-else class="image" :src="params.checkerSignature"></image>
            </view>
            <view v-else class="right-block">
              <text v-if="!params.checkerSignature">签章({{params.checkerName ? params.checkerName : ''}})</text>
              <image v-else class="image" :src="params.checkerSignature"></image>
            </view>
          </view>
          <view class="info-block mb-30">
            <view class="item-label">充装人:</view>
            <view v-if="!disabled" class="right-block" @click="routeByUrls()">
              <text v-if="!params.filterSignature">签章({{params.filterName ? params.filterName : ''}})</text>
              <image v-else class="image" :src="params.filterSignature"></image>
            </view>
            <view v-else class="right-block">
              <text v-if="!params.filterSignature">签章({{params.filterName ? params.filterName : ''}})</text>
              <image v-else class="image" :src="params.filterSignature"></image>
            </view>
          </view>
        </u-collapse-item>
      </u-collapse>
    </view>
    <view v-if="type != 1" class="button-block mt-50">
      <!-- <button class="button-cancel" @click="$u.throttle(save, 1000)">保存草稿</button> -->
      <button class="button-submit" @click="$u.throttle(submit, 1000)">提交</button>
    </view>
  </view>
</template>

<script>
  import { getlngvehicle,getsubmit } from '@/apis/work/index.js'
  import { getDictListApi, getSpecialWorkListApi, getSafeInfoListApi } from '@/apis/work/common.js'
  import { getToken, getUserInfo } from '@/utils/auth.js'
  import dayjs from 'dayjs'

  export default {
    data() {
      return {
        type:'',
        workInfo:[],
        vehicleId:'',
        disabled: false,
        params: {},
        paramsSafeInfoList: [
          {content:"检查槽车切断阀启闭、仪表显示是否正常"},
          { 
            content:"检查装卸台至罐区装车管线畅通，安全阀根部处在全开状态,静电接地确认",
            type:1,
            photo:[]
          },
          { content:"打开装卸臂氮气阀门,将吹扫压力控制在0.05-0.08MPa",},
          { 
            content:"将装卸臂液相管、气相管、增压液相软管与LNG槽车相对应接好，用氮气吹扫液相管、气相管",
            type:1,
            photo:[]
          },
          {content:"关闭去罐区气相阀，保持增压气相管畅通，打开增压液相阀缓慢增压"},
          {content:"增压卸车时打开增压支路手动阀，关闭泵进出口手动阀，待槽车内压力达到0.6MPa时，通知中控室开始卸车进液"},
          {content:"装卸台人员缓慢开启LNG槽车液相出口阀，并密切关注储罐压力和管路温度。缓慢增大进液流量直至槽车出液阀门全开"},
          {content:"泵压卸车时打开泵支路手动阀，关闭增压卸车进出口手动阀，打开泵BOG回气阀待泵池充满LNG，通知监控室设定、启动卸车泵进行卸液"},
          {content:"待泵回气温度上升时停泵，切换至增压卸液"},
        ],
      }
    },
    onLoad(options) {
      console.log(options)
      this.vehicleId = options.id
      this.getlngvehicle({id:options.id})
      if(options.type){
        this.type = options.type
        this.disabled = true
        this.workInfo = ['workInfo']
      }
    },
    methods: {
      getlngvehicle: function(params) {
        getlngvehicle(params).then(res => {
         console.log(res)
         this.params = res
         this.params.spqpCtfValidDate = dayjs(this.params.spqpCtfValidDate).format('YYYY-MM-DD HH:mm:ss')
         this.params.driverDtctfValidDate = dayjs(this.params.driverDtctfValidDate).format('YYYY-MM-DD HH:mm:ss')
         this.params.scgDtctfValidDate = dayjs(this.params.scgDtctfValidDate).format('YYYY-MM-DD HH:mm:ss')
         this.params.yuYueShiJian = dayjs(this.params.yuYueShiJian).format('YYYY-MM-DD HH:mm:ss')
         console.log(this.params)
         if(this.disabled){
          this.paramsSafeInfoList = res.measures
          console.log(this.paramsSafeInfoList)
          this.paramsSafeInfoList.map(item => {
            let list = []
            let imageList = item.photo ? item.photo.split(',') : []
            console.log(imageList)
            imageList.map(child => list.push({ url: child, status: 'success', message: ''}))
            if(item.photo){
              Object.assign(item, { photo: list, type:1})
            }
            Object.assign(item, { radioStatus: item.qualified === false ? '不合格' : '合格'})
          })
          console.log(this.paramsSafeInfoList)
         }
        }).catch(err => console.warn(err))
      },
      radioChange: function(item,index, event) {
        console.log(item,index,event)
        if(event == "合格"){
          Object.assign(item,{number:index,qualified:true,vehicleId:this.vehicleId})
        }else{
          Object.assign(item,{number:index,qualified:false,vehicleId:this.vehicleId})
        }
       console.log(this.paramsSafeInfoList)
      },
      uploadFilePromise(url) {
        return new Promise((resolve, reject) => {
          let a = uni.uploadFile({
            url: this.uploadImageUrl,
            filePath: url, name: 'file', formData: { "Content-Type": "multipart/form-data" },
            header: { 'Authorization': `Bearer ${getToken()}`, 'tenant-id':  '1' },
            success: res => {
              let result = JSON.parse(res.data)
              if (result.code == 0) {
                resolve({url: result.data.url, status: 'success'})
              } else {
                uni.showToast({ title: 'OSS服务器错误', icon: 'none' })
                resolve({url, status: 'fail'})
              }
            },
            fail: () => uni.showToast({ title: '图片上传失败', icon: 'none' })
          })
        })
      },
      async afterRead(event) {
        console.log(event)
        let lists = [].concat(event.file)
        console.log(lists)
        let nameObj = JSON.parse(event.name)
        let fileListLen = this[nameObj.paramsKey][nameObj.index][nameObj.keyName].length
        lists.map(item => this[nameObj.paramsKey][nameObj.index][nameObj.keyName].push({ ...item, status: 'uploading', message: '上传中' }) )
        for (let i = 0; i < lists.length; i++) {
          const result = await this.uploadFilePromise(lists[i].url)
          let item = this[nameObj.paramsKey][nameObj.index][nameObj.keyName][fileListLen]
          if(result.status == 'success') {
            this[nameObj.paramsKey][nameObj.index][nameObj.keyName].splice(fileListLen, 1, Object.assign(item, { status: result.status, message: '', url: result.url }))
            fileListLen++
          } else {
            this[nameObj.paramsKey][nameObj.index][nameObj.keyName].splice(fileListLen, 1)
          }
        }
        console.log(this.paramsSafeInfoList)
      },
      deletePic(event) {
        if(this.disabled) return false
        let nameObj = JSON.parse(event.name)
        this[nameObj.paramsKey][nameObj.index][nameObj.keyName].splice(event.index, 1)
      },
      getsubmit() {
        getsubmit(this.params).then(res => {
         console.log(res)
         uni.navigateBack();
        }).catch(err => console.warn(err))
      },
      submit: function() {
        console.log('111111')
        // this.params.userId = this.params.userId + ""
        if(!this.authFormData()) return false
        this.paramsSafeInfoList.map(item => {
          console.log(item)
          let imageList = []
          if(item.photo && item.photo.length > 0) item.photo.map(child => imageList.push(child.url))
          if(item.photo){
            Object.assign(item, { photo: imageList.toString()})
          }
        })
        this.params.measures = this.paramsSafeInfoList
        this.getsubmit()
      },
      
      cancelConfirm: function() {
        if(!this.checkSignature) {
          uni.showToast({  title: '审核人员未签章', icon: 'none' })
          return false
        }
        if(!this.reasonForRejection) {
          uni.showToast({  title: '请输入驳回原因', icon: 'none' })
          return false
        }
        let params = { licenceId: this.params.id, submit: false, reasonForRejection: this.reasonForRejection, signature: this.checkSignature }
        this.checkWorkInfo(params)
      },
     
      createWorkInfo: function(submitState) {
        let params = JSON.parse(JSON.stringify(this.params))
        params.guardianName = params.guardianIdId
        let personList = JSON.parse(JSON.stringify(this.paramsPersonList))
        let safeMeasuresList = JSON.parse(JSON.stringify(this.paramsSafeInfoList))
        if(submitState) if(!this.authFormData()) return false
        if(params.startTime) Object.assign(params, { startTime: dayjs(params.startTime).format('YYYY-MM-DD HH:mm:ss')})
        if(params.endTime) Object.assign(params, { endTime: dayjs(params.endTime).format('YYYY-MM-DD HH:mm:ss')})
        personList.map(item => {
          let imageList = []
          if(item.certification && item.certification.length > 0) item.certification.map(child => imageList.push(child.url))
          Object.assign(item, { certification: imageList.toString()})
        })
        safeMeasuresList.map(item => {
          if(item.state) {
            if(item.equipmentJson) Object.assign(item, { equipmentJson: JSON.stringify(item.equipmentJson) })
          } else {
            let imageList = []
            if(item.photo && item.photo.length > 0) item.photo.map(child => imageList.push(child.url))
            Object.assign(item, { photo: imageList.toString()})
            if(item.radioStatus) {
              if(item.radioStatus == '合格' || item.radioStatus == '不合格') Object.assign(item, { qualified: item.radioStatus == '合格' ? true : false})
              if(item.radioStatus == '不适用') Object.assign(item, { applicable: false})
              delete item.radioStatus
            } else {
              Object.assign(item, { qualified: false })
            }
          }
        })
        Object.assign(params, { submit: submitState, personList, safeMeasuresList })
        if (typeof params.identificationResult !== 'string') {
          console.log('不是string')
         params.identificationResult = JSON.stringify(params.identificationResult)
        }
        if (typeof params.otherLicenceName !== 'string') {
         params.otherLicenceName = JSON.stringify(params.otherLicenceName)
        }
        console.log('params', params)
        if(params.id) {
          updateWorkInfoApi(params).then(res => {
            uni.showToast({ title: '提交成功', icon: 'none' })
            setTimeout(() => uni.navigateBack(), 500)
          }).catch(err => console.warn(err))
        } else {
          createWorkInfoApi(params).then(res => {
            uni.showToast({ title: '提交成功', icon: 'none' })
            setTimeout(() => uni.navigateBack(), 500)
          }).catch(err => console.warn(err))
        }
      },

      authFormData: function() {
        let params = this.params
        let safeMeasuresList = this.paramsSafeInfoList
        
        for(let index = 0; index < safeMeasuresList.length; index ++) {
          console.log(safeMeasuresList[index].qualified )
          if(safeMeasuresList[index].qualified == undefined) {
            
            console.log("有有字段")
            uni.showToast({ title: `请选择安全措施第${index + 1}项安全状态`, icon: 'none' })
            return false
          }else if(safeMeasuresList[index].qualified == false){
            uni.showToast({ title: `请选则合格项`, icon: 'none' })
            return false
          }
          
        }
        if(!params.checkerSignature) {
          uni.showToast({ title: '检查人未签章', icon: 'none' })
          return false
        }
        if(!params.filterSignature) {
          uni.showToast({ title: '充装人未签章', icon: 'none' })
          return false
        }
        return true
      },
      routeByUrls(){
        uni.navigateTo({ 
          url:`/operationorder/auditstaff?paramsKey=filterId`
        })
      },
      routeByUrl: function(url, state = false) {
        uni.navigateTo({ 
          url:`/operationorder/auditstaff?paramsKey=checkerId`
        })
      }
    }
  }
</script>

<style>
  page {
    background-color: #EFEFEF;
  }
  .u-radio-group {
    align-items: center;
    justify-content: space-around;
  }
  .u-radio__text {
    font-size: 28rpx;
    line-height: 40rpx;
    color: #666666;
  }
  .u-radio-group .u-radio .u-radio__icon-wrap {
    width: 30rpx !important;
    height: 30rpx !important;
  }
</style>

<style lang="scss" scoped>
  .content {
    /deep/ .u-checkbox-group {
      flex-wrap: wrap;
    }
    /deep/ .u-checkbox{
      width: 33%;
    }
    .wraning-icon {
      color: #FE0303;
      margin-right: 5rpx;
    }
    .toast-block {
      background-color: #FFFFFF;
      width: 500rpx;
      min-height: 200rpx;
      .toast {
        font-size: 28rpx;
        line-height: 40rpx;
        color: #333333;
        text-indent: 48rpx;
      }
    }
    .popup-block {
      width: 600rpx;
      padding: 20rpx;
      .image-list {
        display: flex;
        flex-wrap: wrap;
        .item-image {
          width: 180rpx;
          height: 180rpx;
          border-radius: 10rpx;
          background-color: #CCCCCC;
          margin: 10rpx;
        }
      }
      .popup-title {
        font-size: 30rpx;
        line-height: 42rpx;
        font-weight: 500;
        display: flex;
        // text-align: center;
        .inputcss{
          border: 1rpx solid #BBBBBB;
          border-radius: 8rpx;
          margin-left: 30rpx;
        }
      }
      .button-block {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
    .list-block {
      background-color: #FFFFFF;
      border-radius: 10rpx;
      .item-blocks {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .item-label {
          font-size: 28rpx;
          line-height: 40rpx;
          color: #333333;
          .wraning-icon {
            color: #FE0303;
            margin-right: 5rpx;
          }
        }
        .item-value {
          font-size: 28rpx;
          line-height: 40rpx;
          color: #999999;
          max-width: 500rpx;
          display: flex;
          align-items: center;
        }
        .image-list {
          max-width: 520rpx;
          display: flex;
          justify-content: flex-end;
          flex-direction: row-reverse;
          flex-wrap: wrap;
          .image {
            width: 156rpx;
            height: 120rpx;
            border-radius: 6rpx;
            background-color: #CCCCCC;
            margin-left: 9rpx;
            // margin-bottom: 20rpx;
          }
          .image:nth-child(3n) {
            margin-left: 0;
          }
        }
      }
      .title-block {
        display: flex;
        align-items: center;
        font-size: 28rpx;
        line-height: 40rpx;
        font-weight: 500;
        color: #333333;
        .title-icon {
          width: 15rpx;
          height: 15rpx;
          border-radius: 100%;
        }
      }
      .item-list {
        position: relative;
        .position-icon {
          width: 36rpx;
          height: 36rpx;
          position: absolute;
          top: 0;
          right: 0;
        }
      }
      .item-block {
        .item-label {
          font-size: 28rpx;
          line-height: 40rpx;
          color: #666666;
          display: flex;
          align-items: center;
          // .wraning-icon {
          //   color: #FE0303;
          //   margin-right: 5rpx;
          // }
        }
        .input-block {
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 64rpx;
          border: 1rpx solid #BBBBBB;
          border-radius: 8rpx;
          font-size: 28rpx;
          line-height: 40rpx;
          color: #999999;
          .input {
            width: 500rpx;
            font-size: 28rpx;
            line-height: 40rpx;
            color: #333333;
          }
          .placeholder {
            font-size: 28rpx;
            line-height: 40rpx;
            color: #999999;
          }
          .select-value {
            color: #333333;
          }
        }
      }
      .info-block {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .item-label {
          font-size: 28rpx;
          line-height: 40rpx;
          color: #666666;
        }
        .right-block {
          width: 484rpx;
          height: 128rpx;
          border: 1rpx solid #BBBBBB;
          border-radius: 8rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 28rpx;
          color: #666666;
          .image {
            width: 100%;
            height: 100%;
          }
        }
      }
      .image-block {
        display: flex;
        align-items: center;
        .image-title {
          font-size: 28rpx;
          line-height: 40rpx;
          color: #666666;
          margin-right: 20rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .button-block {
        display: flex;
        justify-content: center;
        .button {
          width: 674rpx;
          height: 80rpx;
          border-radius: 10rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 30rpx;
          color: #FFFFFF;
          background-color: #03B3FD;
        }
        .button::after {
          border: none;
        }
      }
    }
    .button-block {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .button-cancel {
        width: 334rpx;
        height: 64rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26rpx;
        color: #FFFFFF;
        border-radius: 8rpx;
        background-color: #BBBBBB;
        box-shadow: 7rpx 9rpx 15rpx rgba(51, 51, 51, 0.27);
      }
      .button-cancel::after {
        border: none
      }
      .button-submit {
        @extend .button-cancel;
        background-color: #03B3FD;
      }
      .button-submit::after {
        border: none;
      }
      .button-success {
        width: 668rpx;
        @extend .button-cancel;
        background-color: #19BE6B;
      }
      .button-success::after {
        border: none;
      }
    }
  }
</style>
